<template>
    <div>
        <van-form>
            <van-field v-model="form.mobile" label='手机号' placeholder='手机号' :rules="[{'required':true,'message':'必须输入手机号'}]"/>
            <van-field v-model="form.password" label='密码' placeholder='密码' :rules="[{'required':true,'message':'必须输入密码'}]"/>
            <van-button color="linear-gradient(to right, #7232dd, #ffffff)" @click="login" style="width:200px">
                    登录
            </van-button>
        </van-form>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                form:{}
            }
        },
        methods:{
            login(){
                this.$axios.post('login',this.form)
                .then(res=>{
                    if(res.data.code==200){
                        alert('登录成功')
                        //登录成功后，要把id、用户名也就是手机号存到loaclStrorage上
                        localStorage.setItem('userid',res.data.id)
                        localStorage.setItem('username',res.data.mobile)
                        //登录成功后跳转
                        this.$router.push({'path':'/userinfo'})
                    }
                })
            },
        },
    }
</script>

<style scoped>

</style>